<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/iview/dist/styles/iview.css">
    <link rel="stylesheet" href="/css/buttons.css">
    <script src="/js/vue.js"></script>
    <script src="/js/iview/dist/iview.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/jquery-3.3.1.js"></script>
    <script src="/js/permissionShow.js"></script>
    <style>
        html body{
            width: 100%;
            height: auto;
            background: rgb(2,0,36);
            background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(235,170,217,0.9699230033810399) 0%, rgba(0,212,255,1) 100%);
        }
    </style>
</head>
<body>
<div id="app">
    <div style="display: flex;justify-content: space-between;align-items: center;">
        <row type="flex" justify="space-between" align="bottom">
            <i-col :span="5" permissionerequier="asker:queryAskersPaging">
                <span>咨询师名称:</span>
                <i-input v-model="askerForm.askerName"></i-input>
            </i-col>
            <i-col :span="3" permissionerequier="asker:queryAskersPaging">
                <i-button type="success" long @click="queryAskerPaging">搜索</i-button>
            </i-col>
            <i-col :span="6">
                <button permissionerequier="asker:expertAsker" @click="expertAsker"  class="button button-small  button-3d button-royal button-rounded">
                    <Icon type="android-download"></Icon>
                    导出数据为表格
                </button>
            </i-col>
            <i-col :span="5">
                <button permissionerequier="asker:getTemplate" @click="templateShow"  class="button button-small  button-3d button-royal button-rounded button-pill ">
                    下载模板
                </button>
            </i-col>
            <i-col :span="5" permissionerequier="asker:importAsker">
                <upload :show-upload-list="false" action="/asker/importAsker" :on-success="importsuc" :on-error="importerr">
                    <button  class="button button-small button-jumbo  button-3d button-pill">
                        <Icon type="android-download"></Icon>
                        导入咨询师
                    </button>
                </upload>
            </i-col>
        </row>
        <div>
            <i-button icon="loop" type="info" @click="reloadHTML">刷新</i-button>
        </div>
    </div>
    <div style="margin-top: 10px;">
        <i-table  permissionerequier="asker:queryAskersPaging" stripe  :data="askerData" :loading="askerLoding" :columns="askerColumn"></i-table>
    </div>
    <div style="margin-top: 10px;display: flex;justify-content: center;align-items: center;">
        <page @on-page-size-change="pgeSizeChange" @on-change="pageChanage" :total="askerColumn.total"   :current="askerColumn.page"
              :page-size="askerColumn.rows" show-elevator show-sizer></page>
    </div>
    <div style="display: none;">
        <modal v-model="updateWeightModal"   title="修改咨询师权重">
            <i-form style="" :label-width="100" :model="updateWeightForm"  label-position="right"  ref="updateWeightRef" :rules="updateWeightRules">
                <form-item  label="权重"  prop="weight">
                    <input-number :max="1000" :min="1" v-model="updateWeightForm.weight"></input-number>
                </form-item >
                <form-item  label="备注">
                    <i-input v-model="updateWeightForm.bakContent" type="textarea" placeholder="请输入备注"></i-input>
                </form-item >
            </i-form>
            <div slot="footer">
                <i-button type="success" size="large" @click="updateWeightAndContext">修改</i-button>
                <i-button type="info" size="large"   @click="updateWeightModal=false">取消</i-button>
            </div>
        </modal>
        <modal v-model="showTemplateMadal" title="选择下载列">
            <checkbox-group v-model="TemplateColumnCheck">
                <checkbox :disabled="o.noNull" :label="o.name" v-for="o in showTemplateColumn">
                    <span>{{o.name}}</span>
                </checkbox>
            </checkbox-group>
            <div slot="footer">
                <i-button type="success" size="large" long  @click="downTemplate">下载</i-button>
            </div>
        </modal>
    </div>
</div>
</body>
<script>
    var maindata={
        data(){
            return{
                TemplateColumnCheck:[],
                showTemplateColumn:[],
                showTemplateMadal:false,
                updateWeightRules:{
                    weight:[
                        {required:true,message:'请选择权重值',trigger: 'blur'}
                    ]
                },
                updateWeightForm:{
                    weight:0,
                    bakContent:'',
                    askerId:''
                },
                updateWeightModal:false,
                askerForm:{
                    askerName:'',
                    page:1,
                    rows:10,
                    total:0,
                },
                askerData:[],
                askerColumn:[
                    {
                        title:'咨询师名称',
                        key:'askerName'
                    },
                    {
                        title:'签到状态',
                        key:'checkState'
                    },
                    {
                        title:'签到时间',
                        key:'checkInTime'
                    },
                    {
                        title:'是否分配学生',
                        key:'changeState'
                    },
                    {
                        title:'权重',
                        key:'weight'
                    },
                    {
                        title:'角色名称',
                        key:'roleName'
                    },
                    {
                        title:'备注信息',
                        key:'bakContent'
                    },
                    {
                        title:'操作',
                        render:(h,params)=>{
                            return h('i-button',{
                                attrs:{
                                    permissionerequier:'asker:updateAskerWeightAndContext'
                                },
                                on:{
                                    click:()=>{
                                        this.updateWeightModal=true;
                                        this.updateWeightForm.askerId=params.row.askerId;
                                        this.updateWeightForm.weight=params.row.weight;
                                        this.updateWeightForm.bakContent=params.row.bakContent;
                                    }
                                }
                            },"调整分量顺序")
                        }
                    }
                ],
                askerLoding:true
            }
        },
        methods:{
            //下载模板
            downTemplate(){
                if(this.TemplateColumnCheck.length==0||this.TemplateColumnCheck==null){
                    this.$Message.error("未选择需要导入的列");
                    return
                }
                const form = document.createElement('form')
                form.action = "/asker/expertTemplate"
                form.method = 'GET'
                const names=document.createElement("input");
                names.name="names"
                names.value = this.TemplateColumnCheck;
                form.style.display = 'none'
                form.appendChild(names);
                document.body.appendChild(form)
                form.submit()
                document.body.removeChild(form)
                this.showTemplateMadal=false;
            },
            //打开模板模态框
            templateShow(){
                axios.get('/asker/getTemplate')
                    .then((response)=>{
                        this.showTemplateColumn=response.data;
                        this.TemplateColumnCheck=response.data.filter(row=>{
                            return row.noNull
                        })
                        this.TemplateColumnCheck=this.TemplateColumnCheck.map(row=>{
                            return row.name;
                        })
                        console.log(this.TemplateColumnCheck)
                        this.showTemplateMadal=true;
                    })
                    .catch((error)=>{
                        try {
                            if(error.response.data.success==false){
                                console.log(error.response.data.message)
                                if(error.response.data.message=="请先登录"){
                                    //  window.top.location.href="/";
                                }
                                this.$Notice.error({
                                    title: '查询失败',
                                    desc:  error.response.data.message
                                });
                            }
                        }
                        catch(err) {
                            this.$Notice.error({
                                title: '查询失败',
                                desc:  ''
                            });
                        }
                    })
            },
            importsuc(response, file, fileList){
                if(response.success){
                    this.$Message.success("成功");
                }else{
                    this.$Message.error(response.message);
                }

            },
            importerr(error, file, fileList){
                this.$Message.error(error.message);
            },
            expertAsker(){
                const form = document.createElement('form')
                form.action = "/asker/expertAsker"
                form.method = 'GET'
                form.style.display = 'none'

                const askerName = document.createElement('input')
                askerName.name="askerName";
                askerName.value=this.askerForm.askerName;
                const button = document.createElement('input')
                button.type = 'submit'
                form.appendChild(askerName)
                form.appendChild(button)
                document.body.appendChild(form)
                form.submit()
                document.body.removeChild(form)

            },
            updateWeightAndContext(){
                let params=new URLSearchParams();
                params.append("weight",this.updateWeightForm.weight);
                params.append("bakContent",this.updateWeightForm.bakContent);
                axios.put('/asker/updateAskerWeightAndContext/'+this.updateWeightForm.askerId,params)
                    .then((response) => {
                       if(response.data.success){
                           this.$Notice.success({
                               title: '修改成功',
                               desc:  ''
                           });
                           this.updateWeightModal=false;
                           this.askerPaging();
                       }else{
                           this.$Notice.error({
                               title: '修改失败',
                               desc:  error.response.data.message
                           });
                       }

                    })
                    .catch((error)=>{
                        try {
                            if(error.response.data.message=="请先登录"){
                                window.top.location.href="/";
                            }
                            if(error.response.data.success==false){
                                this.$Notice.error({
                                    title: '修改失败',
                                    desc:  error.response.data.message
                                });
                            }
                        }
                        catch(err) {
                            this.$Notice.error({
                                title: '修改失败',
                                desc:  ''
                            });
                        }                                               console.log(error)
                    })
            },
            pageChanage(page){
                this.askerForm.page=page;
                this.askerPaging();
            },
            pgeSizeChange(size){
                this.askerForm.rows=size;
                this.askerPaging();
            },
            queryAskerPaging(){
                this.askerForm.page=1;
                this.askerPaging();
            },
            askerPaging(){

                window.setTimeout(()=>{
                    permissionshow();
                },100)
                this.askerData=[];
                this.askerLoding=true;
                axios.get('/asker/queryAskersPaging',{
                    params:this.askerForm
                })
                    .then((response) => {
                        this.askerForm.total=response.data.total;
                        this.askerData=response.data.rows;
                        this.askerLoding=false;


                    })
                    .catch((error)=>{
                        try {
                            if(error.response.data.message=="请先登录"){
                                window.top.location.href="/";
                            }
                            if(error.response.data.success==false){
                                this.$Notice.error({
                                    title: '查询失败',
                                    desc:  error.response.data.message
                                });
                            }
                        }
                        catch(err) {
                            this.$Notice.error({
                                title: '查询失败',
                                desc:  ''
                            });
                        }                                               console.log(error)
                    })
            },
            reloadHTML() {
                //window.location.reload();
                this.$Spin.show();
                this.$Loading.start();
                setTimeout(() => {
                    this.$Spin.hide();
                    this.$Loading.finish();
                    window.location.reload();
                }, 1000);
            },
        },
        mounted(){
            this.askerPaging();
        }
    }
    var Component = Vue.extend(maindata)
    new Component().$mount('#app')
</script>
</html>